<template>
  <div class="card-wrap flex-column justify-end card-padding">
    <el-form :model="form" ref="carInformation" label-width="100px">
      <div class="card-title-wrap">
        <span>费用信息</span>
        <span></span>
      </div>
      <div class="table-title-wrap flex-row-center" style="margin-top: 20px">
        <p class="statisticInfo">
          付款车辆数: <span>{{ form.carList && form.carList.length }} 台</span>
        </p>
        <p class="statisticInfo">
          总费用: <span>{{ format_thousand(totalPrice) }} 元</span>
        </p>
      </div>
      <el-table :data="form.carList" border>
        <el-table-column label="车牌号" align="center" prop="carNo" min-width="120px" show-overflow-tooltip />
        <el-table-column label="车架号" align="center" prop="vinNo" min-width="180px" show-overflow-tooltip />
        <el-table-column label="品牌/车型/车款" align="center" prop="carInFo" min-width="380px" show-overflow-tooltip />
        <el-table-column label="车辆归属" align="center" prop="vehicleOwnerName" min-width="120px" show-overflow-tooltip />
        <el-table-column label="额度申请编号" align="center" prop="calcSchemeCode" min-width="200px" show-overflow-tooltip>
          <template slot-scope="scope">
            <span @click="goToDetail(scope.row.calcSchemeId, scope.row.processId)" style="color: #1890ff; cursor: pointer">{{ scope.row.calcSchemeCode }}</span>
          </template>
        </el-table-column>
        <el-table-column label="订单编号" align="center" prop="orderCarCode" min-width="200px" show-overflow-tooltip>
          <template slot-scope="scope">
            <span @click="orderDetail(scope.row)" style="color: #1890ff; cursor: pointer">{{ scope.row.orderCarCode }}</span>
          </template>
        </el-table-column>
        <el-table-column label="出租方" align="center" prop="lessorName" min-width="120px" show-overflow-tooltip />
        <el-table-column label="业务类型" align="center" prop="businessType">
          <template slot-scope="scope">
            <dict-tag :options="dict.type.business_type" :value="scope.row.businessType" />
          </template>
        </el-table-column>
        <el-table-column label="订单提交人" align="center" prop="orderSubmitter" min-width="120px" show-overflow-tooltip />
        <el-table-column label="GPS状态" align="center" prop="gpsStatus" min-width="120px" show-overflow-tooltip>
          <template slot-scope="scope">
            <el-select v-if="type !== 'detail'" v-model="scope.row.gpsStatus" placeholder="请选择">
              <el-option v-for="item in GPSlist" :key="item.value" :label="item.label" :value="item.value"> </el-option>
            </el-select>
            <span v-if="type == 'detail'">{{ scope.row.gpsStatus == 1 ? '正常' : '异常' }}</span>
          </template>
        </el-table-column>
        <el-table-column label="服务费(元)" align="center" prop="serviceCharge" min-width="150px" show-overflow-tooltip>
          <template slot-scope="scope">
            <el-input v-if="type !== 'detail'" v-model="scope.row.serviceCharge" maxlength="13" @input="scope.row.serviceCharge = scope.row.serviceCharge.replace(/^\D*([0-9]\d*\.?\d{0,2})?.*$/, '$1')" placeholder="请输入服务费" />
            <span v-if="type == 'detail'">{{ scope.row.serviceCharge }}</span>
          </template>
        </el-table-column>
        <TableCloumn v-if="type !== 'detail'" v-for="item in tableCloumnGLS" :cellOptions="item" minWidth="150px" />
        <el-table-column v-if="type == 'detail'" label="公里数" align="center" prop="kilometres" min-width="120px" show-overflow-tooltip />

        <el-table-column label="运输费单价(元/公里/台)" align="center" prop="unitPriceOfFreight" min-width="200px" show-overflow-tooltip>
          <template slot-scope="scope">
            <span>{{ format_thousand(scope.row.unitPriceOfFreight) }}</span>
          </template>
        </el-table-column>

        <el-table-column label="运输费" align="center" prop="priceOfFreight" min-width="150px" show-overflow-tooltip>
          <template slot-scope="scope">
            <el-input v-if="type !== 'detail'" v-model="scope.row.priceOfFreight" maxlength="13" @input="scope.row.priceOfFreight = scope.row.priceOfFreight.replace(/^\D*([0-9]\d*\.?\d{0,2})?.*$/, '$1')" placeholder="请输入运输费" />
            <span v-if="type == 'detail'">{{ scope.row.priceOfFreight }}</span>
          </template>
        </el-table-column>

        <TableCloumn v-if="type !== 'detail'" v-for="item in tableCloumnTT" :cellOptions="item" minWidth="150px" />
        <el-table-column v-if="type == 'detail'" label="仓储天数" align="center" prop="daysOfStorage" min-width="120px" show-overflow-tooltip />

        <el-table-column label="仓储费单价(元/天/台)" align="center" prop="unitPriceOfStorageFee" min-width="200px" show-overflow-tooltip>
          <template slot-scope="scope">
            <span>{{ format_thousand(scope.row.unitPriceOfStorageFee) }}</span>
          </template>
        </el-table-column>

        <el-table-column label="仓储费(元)" align="center" prop="priceOfStorageFee" min-width="150px" show-overflow-tooltip>
          <template slot-scope="scope">
            <el-input
              v-if="type !== 'detail'"
              v-model="scope.row.priceOfStorageFee"
              maxlength="13"
              @input="scope.row.priceOfStorageFee = scope.row.priceOfStorageFee.replace(/^\D*([0-9]\d*\.?\d{0,2})?.*$/, '$1')"
              placeholder="请输入仓储费"
            />
            <span v-if="type == 'detail'">{{ scope.row.priceOfStorageFee }}</span>
          </template>
        </el-table-column>

        <el-table-column label="其他费用(元)" align="center" prop="otherFee" min-width="150px" show-overflow-tooltip>
          <template slot-scope="scope">
            <el-input v-if="type !== 'detail'" v-model="scope.row.otherFee" maxlength="13" @input="scope.row.otherFee = scope.row.otherFee.replace(/^\D*([0-9]\d*\.?\d{0,2})?.*$/, '$1')" placeholder="请输入其他费用" />
            <span v-if="type == 'detail'">{{ scope.row.otherFee }}</span>
          </template>
        </el-table-column>

        <el-table-column label="总费用(元)" align="center" prop="totalFee" min-width="150PX" show-overflow-tooltip>
          <template slot-scope="scope">
            <span>{{ format_thousand(scope.row.totalFee) }}</span>
          </template>
        </el-table-column>

        <el-table-column label="收车地址" align="center" prop="pickUpAddress" min-width="150px" show-overflow-tooltip>
          <template slot-scope="scope">
            <span>{{ scope.row.pickUpAddress }}</span>
          </template>
        </el-table-column>

        <el-table-column label="送车地址" align="center" prop="dropOffAddress" min-width="150px" show-overflow-tooltip>
          <template slot-scope="scope">
            <span>{{ scope.row.dropOffAddress }}</span>
          </template>
        </el-table-column>
      </el-table>
    </el-form>
  </div>
</template>

<script>
import SearchContent from '@/components/SearchContent/index.vue'
import TableCloumn from '@/views/finance/manage/tableColumn/index.vue'

export default {
  // 车辆信息
  name: 'carInformationExpense',
  dicts: ['business_type'],
  components: {
    SearchContent,
    TableCloumn,
  },
  props: {
    value: {
      type: Object,
      default: {},
    },
    state: {
      type: String,
      default: '',
    },
  },
  computed: {
    tableCloumnGLS() {
      return [
        {
          label: '公里数',
          prop: 'kilometres',
          type: 'input',
          width: '150px',
          watch: ({ val, row }) => {
            this.$set(row, 'priceOfFreight', row.kilometres * row.unitPriceOfFreight)
          },
        },
      ]
    },
    tableCloumnTT() {
      return [
        {
          label: '仓储天数',
          prop: 'daysOfStorage',
          type: 'input',
          width: '150px',
          watch: ({ val, row }) => {
            this.$set(row, 'priceOfStorageFee', row.daysOfStorage * row.unitPriceOfStorageFee)
          },
        },
      ]
    },
    form: {
      get() {
        return this.value
      },
      set(val) {
        this.$emit('input', val)
      },
    },
    type() {
      let status
      switch (this.state) {
        case 'write':
          status = 'edit'
          break
        case 'disabled':
          status = 'detail'
          break
        case 'readonly':
          status = 'detail'
          break
        case 'detail':
          status = 'detail'
          break
        case 'edit':
          status = 'edit'
        case 'add':
          status = 'add'
          break
      }
      return status
    },
    totalPrice() {
      return this.form.carList?.length > 0 ? this.form.carList.reduce((acc, item) => acc + Number(item.totalFee), 0) : 0
    },
    // carNumber() {
    //   return this.form.carList?.length > 0 ? this.form.carList.reduce((acc, item) => acc + Number(item.CJH), 0) : 0
    // },
  },
  data() {
    return {
      GPSlist: [
        {
          label: '正常',
          value: 1,
        },
        {
          label: '异常',
          value: 2,
        },
      ],
    }
  },
  watch: {
    'form.carList': {
      handler(val) {
        val?.forEach((v, i) => {
          if (v.priceOfFreight && v.priceOfStorageFee && v.serviceCharge && v.otherFee) {
            this.$set(v, 'totalFee', Number(v.priceOfFreight) + Number(v.priceOfStorageFee) + Number(v.serviceCharge) + Number(v.otherFee))
          }
        })
      },
      deep: true,
      immediate: true,
    },
  },
  created() {},
  methods: {
    getList() {},
    /**
     *额度跳转
     */
    goToDetail(calcSchemeId) {
      this._toPage({
        path: '/quota/ApplyDetails',
        query: {
          calcSchemeId,
        },
      })
    },
    /**
     *订单详情
     */
    orderDetail(row) {
      this._toPage({
        name: 'SuborderDetail',
        query: {
          id: row.orderCarId,
          orderCarCode: row.orderCarCode,
        },
      })
    },
  },
}
</script>
<style lang="scss" scoped>
.statisticInfo {
  color: #464646;
  font-size: 14px;
  margin-right: 10px;

  span {
    color: #1884ff;
  }
}
</style>
